<template>
  <!--表单组件-->
  <el-dialog :close-on-click-modal="false" :before-close="handleBeforeClose"
    :visible=true :title="title" width="800px">

    <el-form ref="form" :model="form" size="small">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="平视仪复杂动作判断(s)" prop="psydz">
            <el-input v-model="form.psydz" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="仪表复杂动作判断(s)" prop="ybdz">
            <el-input v-model="form.ybdz" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="自由练习(s)" prop="zylx">
            <el-input v-model="form.zylx" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="固定航线飞行(s)" prop="gdhxfx">
            <el-input v-model="form.gdhxfx" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="模拟飞行着陆(s)" prop="mnfxzl">
            <el-input v-model="form.mnfxzl" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-form-item label="速度表闪现" prop="sdbsx">
            <el-input v-model="form.sdbsx" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="高度表闪现" prop="gdbsx">
            <el-input v-model="form.gdbsx" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="平视仪闪现" prop="psysx">
            <el-input v-model="form.psysx" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="地平仪闪现" prop="dpysx">
            <el-input v-model="form.dpysx" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="罗盘闪现" prop="lpsx">
            <el-input v-model="form.lpsx" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="坚信平视仪_航向误差" prop="jxpsyHxwc">
            <el-input v-model="form.jxpsyHxwc" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="坚信平视仪_高度误差" prop="jxpsyGdwc">
            <el-input v-model="form.jxpsyGdwc" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="坚信平视仪_附加成绩" prop="jxpsyFjcj">
            <el-input v-model="form.jxpsyFjcj" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="坚信平视仪_保持时间" prop="jxpsyBcsj">
            <el-input v-model="form.jxpsyBcsj" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="坚信仪表_航向误差" prop="jxybHxwc">
            <el-input v-model="form.jxybHxwc" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="坚信仪表_高度误差" prop="jxybGdwc">
            <el-input v-model="form.jxybGdwc" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="坚信仪表_附加成绩" prop="jxybFjcj">
            <el-input v-model="form.jxybFjcj" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="坚信仪表_保持时间" prop="jxybBcsj">
            <el-input v-model="form.jxybBcsj" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="评定结果" prop="result">
            <el-select
              v-model="form.result"
              placeholder="请选择"
            >
              <el-option
                v-for="[key, value] in resultOptions"
                :key="value"
                :label="value"
                :value="key"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="记录人" prop="createBy">
            <el-input v-model="form.createBy" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="记录日期" prop="createTime">
            <el-date-picker v-model="form.createTime" :picker-options="pickerOptions" type="date" disabled />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleCommit" :disabled="disabled">确认</el-button>
      </div>
  </el-dialog>
</template>

<script>
import {get, edit, add} from '@/api/trainFxybdx'

import { RATE_RESULTS} from '@/utils/constants'



export default {
  name: 'FxybdxDialog',
  props: {
    trainId: {
      type: Number,
      default: -1,
      required: true
    },
    itemId: {
      type: Number,
      default: -1,
      required: true
    }
  },
  computed: {
    disabled() {
      return this.form.id != null && !this.checkPer(['admin']);
    }
  },
  data() {
    return {
            pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }]
      },
      form: { id: null, trainId: null, trainItemId: null, psydz: null, ybdz: null, zylx: null, gdhxfx: null, mnfxzl: null, sdbsx: null, gdbsx: null, psysx: null, dpysx: null, lpsx: null, jxpsyHxwc: null, jxpsyGdwc: null, jxpsyFjcj: null, jxpsyBcsj: null, jxybHxwc: null, jxybGdwc: null, jxybFjcj: null, jxybBcsj: null, result: null, createBy: null, createTime: null },


      title: '飞行仪表定向',
      resultOptions: RATE_RESULTS,
      isLoading: false // 提交按钮的加载状态
    };
  },
  methods: {
    emit: function(event) {

    },
    handleBeforeClose(done) {
      this.$emit('close', this.itemId);
      if (done) {
        done(); // 调用done()来关闭对话框        
      }
    },
    handleCommit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.isLoading = true; // 提交按钮的加载状态
          this.form.trainId = this.trainId;
          this.form.trainItemId = this.itemId;
          if (this.form.id == null) {
            add(this.form).then(() => {
              this.$emit('close', this.itemId);
              this.isLoading = false;
            }).catch(() => {
              this.isLoading = false;
            });
          } else {
            edit(this.form).then(() => {
              this.$emit('close', this.itemId);
              this.isLoading = false;
            }).catch(() => {
              this.isLoading = false;
            });
          }
        }
      })
    },
    handleCancel() {
      this.$emit('cancel', this.itemId);
    }
  },
  created() {
    console.log(this.trainId, this.itemId);
    if (this.trainId !== -1) {
      this.shouldUpdate = false;

      get(this.trainId, this.itemId).then(response => {
        this.form = Object.assign(this.form, response);
        console.log(response, this.form);

      });
    }
  },
  updated() {

    // 组件更新后执行的逻辑，比如获取数据
  },
  mounted() {

    // if (this.trainId !== -1) {

    //   this.isVisible = 
    // }
    // 组件挂载后执行的逻辑，比如根据props初始化状态
  }
}
</script>

<style scoped>
/* .el-input, .el-select{
  width: 300px !important;
} */

</style>